<template>
  <div id="app">
    <h1>你好啊！新同学</h1>
    <!-- 如果子组件想要给父组件传递消息，需要父组件先传一个函数给子组件，
         子组件通过props接收，然后再调用（第一种方式） -->
    <School :getSchoolName="getSchoolName"/>
    <!-- 通过父组件给组件绑定一个自定义事件，给谁绑定就到谁的组件去写这个自定义事件 -->
    <Student v-on:mysend="getStudentName"/>
    
    <!-- 给组件绑定原生事件需要加一个修饰符 native-->
    <!-- <Student v-on:mysend="getStudentName" @click.native="show"/> -->

    <!-- 也可以通过ref属性给子组件绑定事件 -->
    <!-- <Student ref="student"/> -->
  </div>
 
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
  name: 'App',
  // data(){},
  components:{School,Student},
  methods: {
    // 获取学校的名字
    getSchoolName(value){
      console.log("app接收到学校的名字",value)
    },
     // 获取学生的名字(...parmas 是将接收到de数据包装成一个数组)
    getStudentName(value,...parmas){
      // console.log("app接收到学生的名字",value)
      console.log("app接收到学生的名字",value,parmas)
    },
    /*show(){
      alert("123")
    }*/
  },
  mounted() {
    // 通过this.$refs.student获取到Student标签再通过$on('自定义事件')绑定自定义事件
    // this.$refs.student.$on('mysend',this.getStudentName)
    // 只触发一次
    // this.$refs.student.$once('mysend',this.getStudentName)
    
  },
}
</script>

<style>
  #app{
    /* height: 400px; */
    background-color: burlywood;
  }

</style>
